<template>
  <div class="app-container">
    <!-- 搜索相关区域 -->
    <div class="filter-container">
      <el-form :inline="true" :model="pageQuery" class="demo-form-inline">
        <el-form-item label="酒企名称" style="margin-right: 40px;">
          <el-input v-model="pageQuery.name" size="mini" placeholder="酒企名称" />
        </el-form-item>
        <el-form-item label="酒企编号" style="margin-right: 40px;">
          <el-input v-model="pageQuery.winerySym" size="mini" placeholder="酒企编号" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="pageQuery.wineryStatus" size="mini" placeholder="请选择状态">
            <el-option label="正常" value="1" />
            <el-option label="异常" value="0" />
          </el-select>
        </el-form-item>
        <div>
          <el-form-item label="联系人" style="margin-right: 40px;">
            <el-input v-model="pageQuery.linkman" size="mini" placeholder="联系人" />
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="pageQuery.contactWay" size="mini" placeholder="联系方式" />
          </el-form-item>
        </div>
        <el-form-item>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" icon="el-icon-search" @click="getPage()">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button size="small" class="filter-item" @click="handleDownload_before()">导出</el-button>
        <el-button type="primary" size="medium " class="filter-item" @click="goEnterWine()">录入酒企</el-button>
      </div>
    </div>

    <!-- 列表相关区域 -->
    <el-table v-loading="pageLoading" :data="pageVO.list" border fit highlight-current-row style="width: 100%;">
      <!-- 序号 -->
      <el-table-column label="序号" align="center">
        <template slot-scope="scope">
          <span v-text="getIndex(scope.$index)"></span>
        </template>
      </el-table-column>
      <!-- 酒企编号 -->
      <el-table-column label="酒企编号" prop="winerySym" align="center">
        <template slot-scope="{row}">
          <span>{{ row.winerySym }}</span>
        </template>
      </el-table-column>
      <!-- 酒企名称 -->
      <el-table-column label="酒企名称" prop="name" align="center">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <!-- 签约种类 -->
      <el-table-column label="签约种类" prop="contractTypes" align="center">
        <template slot-scope="{row}">
          <span>{{ row.contractTypes }}</span>
        </template>
      </el-table-column>
      <!-- 联系人 -->
      <el-table-column label="联系人" prop="linkman" align="center">
        <template slot-scope="{row}">
          <span>{{ row.linkman }}</span>
        </template>
      </el-table-column>
      <!-- 联系方式 -->
      <el-table-column label="联系方式" prop="contactWay" align="center">
        <template slot-scope="{row}">
          <span>{{ row.contactWay }}</span>
        </template>
      </el-table-column>
      <!--状态 2:正常，-2:异常 -->
      <el-table-column label="状态" prop="searchType" align="center">
        <template slot-scope="{row}">
          <span v-if="row.wineryStatus==1">正常</span>
          <span v-if="row.wineryStatus==0">异常</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <!-- <el-button v-permission="['product:attr:update']" type="text" @click="addOrUpdateHandle(row.attrId)">
            编辑
          </el-button> -->
          <el-button type="text" @click="wineryDetail(row.wineryId)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <pagination v-show="pageVO.total>0" :total="pageVO.total" :page.sync="pageQuery.pageNum"
      :limit.sync="pageQuery.pageSize" @pagination="getPage()" />
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getPage()" />
  </div>
</template>

<script>
  // import permission from '@/directive/permission/index.js'
  import Pagination from '@/components/Pagination'
  import * as api from '@/api/winery/winery'

  export default {
    name: '',
    components: {
      Pagination
    },
    // directives: { permission },
    data() {
      return {
        // 查询的参数
        pageQuery: {
          pageSize: 10,
          pageNum: 1,
          name: null,
          winerySym: null,
          linkman: null,
          contactWay: null,
          createTime: null,
          status:null
        },
        // 返回参数
        pageVO: {
          list: [], // 返回的列表
          total: 0, // 一共多少条数据
          pages: 0 // 一共多少页
        },
        // 导出新数据
        NewpageVO: {
          list: [], // 返回的列表
          total: 0, // 一共多少条数据
          pages: 0 // 一共多少页
        },
        // 导出新数据
        NewpageSize: '',
        pageQuery1: {
          pageSize: '',
          pageNum: 1,
          name: null,
          winerySym: null,
          linkman: null,
          contactWay: null,
          createTime: null,
          status:null
        },
        filename: '酒企列表单', //导出文件名
        bookType: 'xlsx', //导出类型
        searchParam1: {},
        // loading
        pageLoading: true,
        // 查询参数
        searchParam: {},
        addOrUpdateVisible: false
      }
    },
    mounted() {
      this.getPage()
    },
    methods: {
      // 导出
      handleDownload_before() {
        console.log('======')
        console.log(this.NewpageSize)
        this.pageQuery1.pageSize = this.NewpageSize
        this.pageQuery1.pageNum = 1
        this.pageQuery1.name = this.pageQuery.name
        this.pageQuery1.winerySym = this.pageQuery.winerySym
        this.pageQuery1.linkman = this.pageQuery.linkman
        this.pageQuery1.contactWay = this.pageQuery.contactWay
        this.pageQuery1.createTime = this.pageQuery.createTime
        this.pageQuery1.status = this.pageQuery.status
        api.page({
          ...this.pageQuery1,
          ...this.searchParam1
        }).then(pageVO1 => {
          this.NewpageVO = pageVO1
          console.log(this.NewpageVO)
          console.log('======')
          this.pageLoading = false
        })
        setTimeout(() => {
          this.handleDownload(); //调用export2Excel函数，填写表头和对应字段
        }, 100);
      },
      handleDownload() {
        import('@/utils/Export2Excel').then(excel => {
          this.downloadLoading = true
          const tHeader = [ '酒企编号','酒企名称', '酒企编号', '签约种类', '联系人', '联系方式','状态']
          const filterVal = [ 'winerySym','name', 'winerySym', 'contractTypes', 'linkman', 'contactWay','status']
          const list = this.NewpageVO.list
          console.log('----------------')
          console.log(this.NewpageVO.list)
          console.log(list)
          console.log('----------------')
          const data = this.formatJson(filterVal, list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: this.filename,
            autoWidth: true,
            bookType: this.bookType
          })
          this.downloadLoading = false
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          if (j === this.pageQuery.createTime) {
            return this.pageQuery.createTime(v[j])
          } else {
            return v[j]
          }
        }))
      },
      // 重置
      reset() {
        this.pageQuery.name = null
        this.pageQuery.winerySym = null
        this.pageQuery.linkman = null
        this.pageQuery.contactWay = null
        this.pageQuery.wineryStatus= null
        this.getPage()
      },
      //获取表格序号
      getIndex(index) {
        return (this.pageQuery.pageNum - 1) * this.pageQuery.pageSize + index + 1
      },
      goEnterWine() {
        this.$router.push({
          path: '/wineryEdit/enterWinery'
        })
      },
      wineryDetail(wineryId) {
        this.$router.push({
          path: '/wineryEdit/wineryDetail',
          query: {
            wineryId: wineryId
          }

        })
      },
      getPage() {
        console.log('进入加载页面数据')
        this.pageLoading = true
        api.page({
          ...this.pageQuery,
          ...this.searchParam
        }).then(pageVO => {
          this.pageVO = pageVO
          this.pageLoading = false
          this.NewpageSize = this.pageVO.total
          console.log(this.pageVO)
          console.log('进入加载页面数据')
        })
      },
      // 刷新回调用
      refreshChange() {
        console.log('刷新回调')
        this.page = this.$refs.crud.$refs.tablePage.defaultPage
        this.getPage(this.page)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .demo-form-inline {
    padding: 20px;
    background: #f9f9f9;
    margin-bottom: 30px;
  }

  .btn {
    display: flex;
    justify-content: space-between;
  }
</style>
